<style>
.message-box {
  width: 100vw;
  height: 91.8vh;
  background: url("../assets/img/cat.gif") 0 0/100% 100%;
  min-width: 1200px;
  position: relative;
  overflow: hidden;
}
.message-box .message-zz {
  width: 100%;
  height: 100%;
  background-color: rgba(250, 250, 250, 0.1);
}
.message-box .message {
  background-color: rgba(255, 255, 255, 0.3);
  margin-top: 30px;
  width: 75%;
  height: 90%;
  position: absolute;
  left: 50%;
  margin-left: -37.5%;
  border-radius: 10% 10% 0 0;
  overflow: hidden;
  min-width:1000px;
  min-height: 600px;
}
.message-box .message .message-title {
  width: 100%;
  height: 8%;
  text-align: center;
  /* background-color: yellow; */
  font-size: 20px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  background-color: rgba(255, 255, 255, 0.6);
}
.message-box .message .mb {
  width: 100%;
  height: 80%;
  overflow-y: auto;
}
.message-box .message .message-content {
  width: 100%;
  height: 16%;
  /* background-color:yellow; */
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #ccc;
  position: relative;
  padding-top: 8px;
}
.message-box .message .message-content .m-email {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-top: 10px;
  margin-left: 2%;
}
.message-box .message .message-content .m-email img {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.message-box .message .message-content .m-content {
  /* background-color: #000; */
  width: 92%;
  height: 100%;
  position: absolute;
  right: 0;
}
.message-box .message .message-content .m-content .m-date {
  position: absolute;
  right: 20px;
  bottom: 9px;
  font-size: 10px;
}
.message-box .message .message-content .m-content > p {
  color: blue;
  font-size: 15px;
}
.message-box .message .message-content .m-content .m-text {
  padding: 5px 30px 0 0;
  font-size: 13.5px;
  color: #000;
  text-indent: 1em;
  letter-spacing: 1px;
}
.message-box .message .submit {
  width: 100%;
  height: 12%;
  background-color: rgba(255, 255, 255, 0);
  text-align: center;
  padding: 20px 0;
}
</style>

<template>
  <div class="message-box">
    <div class="message">
      <div class="message-title">全部留言</div>
      <div class="mb" v-if="this.tableData">
        <div class="message-content" v-for="item in tableData" :key="item.id">
          <div class="m-email">
            <img src="../assets/img/userimg.jpg" alt="图片加载中" />
          </div>
          <div class="m-content">
            <p>{{ item.email|emailFilter}}</p>
            <div class="m-text">
              <p>{{ item.commit }}</p>
              <div class="m-date">
                <span style="color: #000">{{ item.date | dataFilter }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="submit">
        <el-button
          @click="drawer = true"
          type="primary"
          style="margin-left: 16px"
        >
          点我留言
        </el-button>
      </div>
      <el-drawer
        title="留言"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose"
        size="40%"
        ref="drawer"
      >
        <el-form
          :model="dynamicValidateForm"
          ref="dynamicValidateForm"
          label-width="100px"
          class="demo-dynamic"
        >
          <el-form-item
            prop="email"
            label="邮箱"
            :rules="[
              {
                required: true,
                message: '为方便联系您，请输入您的邮箱地址',
                trigger: 'blur',
              },
              {
                type: 'email',
                message: '请输入正确的邮箱地址，本站绝对不会泄露您的隐私',
                trigger: ['blur', 'change'],
              },
            ]"
          >
            <el-input v-model="dynamicValidateForm.email"></el-input>
          </el-form-item>
          <el-form-item
            label="留言"
            :rules="[
              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            ]"
          >
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="textarea"
              maxlength="140"
              show-word-limit
              rows="4"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('dynamicValidateForm')"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textarea: "",
      drawer: false,
      direction: "btt",
      dynamicValidateForm: {
        email: "",
      },
      flog:1,
      tableData: [
      ],
    };
  },
  name: "MessageBoard",
  components: {},
  filters: {
    dataFilter: (value) => {
      const dt = new Date(value);
      const y = dt.getFullYear();
      const m = dt.getMonth() + 1;
      const d = dt.getDate();
      const s = dt.getHours();
      const f = dt.getMinutes();
      // const t =dt.getSeconds()

      return y + "-" + m + "-" + d + "  " + s + ":" + f;
    },
    emailFilter: (value) => {
      const l = value.length;
      var star, end;

      if (l > 7) {
        star = value.slice(-l,-10);
        end = value.slice(-7);
        return star + "****" + end;
      } else if (l < 7 && l >= 6) {
        star = value.slice(-l, -4);
        end = value.slice(-2);
       return star + "**" + end;
      }
    },
  },
  created() {
    this.axios.get("http://www.wangshuaiming.xyz:8080/api").then((res) => {
      this.tableData = res.data.reverse();
      
    });
  },
  methods: {
    submitForm(formName) {
      if(this.flog==1){
  this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.textarea == "" && this.textarea.length < 8) {
            this.$message("留言不能小于8个字符");
            return;
          }
          
          let obj = {};
          obj.email = this.dynamicValidateForm.email;
          obj.commit = this.textarea;
          obj.date = new Date();
          this.axios
            .post("http://www.wangshuaiming.xyz:8080/message", {
              email: this.dynamicValidateForm.email,
              commit: this.textarea,
              date: new Date(),
            })
            .then(function (response) {
              console.log(response);
            });
          this.tableData.unshift(obj);
          this.flog+=1
          this.dynamicValidateForm.email=''
          this.textarea=''
          this.$message({
            message: "留言成功",
            type: "success",
          });
          this.$refs.drawer.hide();
        } else {
          this.$message.error("提交失败,邮箱不合法");
          return false;
        }
      });
      }else{
this.$message.error("您已经留过言啦，请稍后再来");
      }
    
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    closeDrawer(done) {
      done();
    },
  },
};
</script>

